<template>
    <div ref="myChart" style="width: 100%; height: 290px;"></div>
</template>

<script>
export default {
    mounted() {
        // 初始化echarts
        // 小区分布统计
        let myChart = this.$echarts.init(this.$refs.myChart);
        // 车位数/已分配数量/已缴费数量
        let colors = ["rgb(25, 212, 174)", "#ccc"];
        // 设置配置项
        let option = {
            color: colors,
            tooltip: {
                trigger: "none",
                axisPointer: {
                    type: "cross",
                },
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true },
                    magicType: { show: true, type: ["bar", "line"] },
                    dataZoom: {
                        yAxisIndex: "none",
                    },
                },
            },
            legend: {},
            grid: {
                top: 70,
                left: 50,
                right: 50,
                bottom: 50,
            },
            xAxis: [
                {
                    type: "category",
                    axisTick: {
                        alignWithLabel: true,
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[1],
                        },
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return (
                                    "用户访问量  " +
                                    params.value +
                                    (params.seriesData.length
                                        ? "：" + params.seriesData[0].data
                                        : "")
                                );
                            },
                        },
                    },
                    // prettier-ignore
                    data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
                },
            ],
            //   y轴属性设置说明
            //   echarts辅助开发文档网址:https://wiki.smartbi.com.cn/pages/viewpage.action?pageId=100250331
            yAxis: [
                {
                    //隐藏Y轴
                    axisLine: {
                        show: false,
                    },
                    // 隐藏Y轴的刻度线
                    axisTick: {
                        show: false,
                    },
                    //y轴数据
                    type: "value",
                    min: 0,
                    max: 250,
                },
            ],
            series: [
                {
                    name: "用户访问量",
                    type: "line",
                    smooth: true,
                    emphasis: {
                        focus: "series",
                    },
                    data: [
                        0,
                        13,
                        6,
                        0,
                        17,
                        14,
                        5,
                        6,
                        16,
                        3,
                        0,
                        10,
                        12,
                        4,
                        1,
                        1,
                        2,
                        1,
                        5,
                        4,
                        4,
                        9,
                        3,
                        7,
                        3,
                        114,
                        233,
                        182,
                        75,
                        0,
                        0,
                        0
                    ],
                },
            ],
        };
        // 绘制图表
        myChart.setOption(option);
    },
};
</script>

<style lang="scss" scoped>
#myChart {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 553px;
    height: 290px;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding: 0px;
    margin: 0px;
    border-width: 0px;
}
</style>
